<template>
  <div class="container">
    <div class="list" v-for="(item,index) in data">
      <div class="list-index border-top-linear-transparent border-bottom-linear-transparent"> </div>
      <div class="list-progress">
        <span>{{item.title}}</span>
      </div>
      <div class="list-count"><span class="font-blue">{{item.count}}</span> 条</div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    data:{
      type:Array,
      default(){
        return []
      }
    }
  },
}
</script>

<style scoped lang="scss">
.container{
  width:100%;
  .list{
    display:flex;
    width:100%;
    align-items: center;
    margin-bottom:1.2rem;
    .list-index{
      background-image: linear-gradient(90deg, rgba(39,241,240,0.10) 0%, rgba(34,180,200,0.00) 100%);
      height:2.2rem;
      border-left:1px solid  rgba(2, 231, 243, 0.8);
      padding:.6rem 1rem;
    }
    .list-progress{
      flex:1;
      margin:0 1rem 0 -1rem;
      text-align:left;
      span{
        line-height:1.8rem;
        font-size:1rem;
      }

    }
    &:hover{
      animation-play-state:paused;
    }
  }
}
::v-deep .el-progress-bar__inner{
  background-image: linear-gradient(270deg, #00E1E4 0%, rgba(59,138,252,0.00) 100%);
}
</style>
